<template>
  <div>
    <x-dialog
      title="选择供应商"
      :close-on-click-modal="false"
      :show.sync="visible"
      v-if="visible"
      class="supplier-dialog"
      append-to-body
      width="1000px"
      :before-close="handleClose"
      @onCancel="handleClose"
      @onSubmit="handleSubmit"
    >
      <div class="select-content">
        <div class="table-area">
          <el-form :model="searchParams" ref="form" class="dialog-fliter">
            <el-row :gutter="20">
              <x-col>
                <el-form-item label="供应商编码">
                  <el-input
                    v-model="searchParams.supplierCode"
                    placeholder="供应商编码"
                    maxlength="100"
                    clearable
                  ></el-input>
                </el-form-item>
              </x-col>
              <x-col>
                <el-form-item label="供应商名称">
                  <el-input
                    v-model="searchParams.fullName"
                    placeholder="供应商名称"
                    maxlength="100"
                    clearable
                  ></el-input>
                </el-form-item>
              </x-col>
              <x-col>
                <el-form-item label="供应商类型" prop="mainServeType">
                  <x-select-tree
                    v-model="searchParams.mainServeType"
                    ref="selectTree"
                    :options="treeData"
                    :placeholder="$t('config.supplierType.name')"
                    :defaultProps="treeProps"
                  />
                </el-form-item>
              </x-col>
              <x-col>
                <div class="search-btns">
                  <el-button type="primary" @click="handleSearch">查询</el-button>
                  <el-button @click="handleReset">重置</el-button>
                </div>
              </x-col>
            </el-row>
          </el-form>
          <x-table
            :data-source="tableData"
            size="mini"
            @on-change="handleTableChange"
            @on-selection-change="handleSelectionChange"
            :pagination="pagination"
            :loading="loading"
            :row-key="'id'"
            :height="400"
          >
            <el-table-column v-if="multiple" type="selection" width="60"></el-table-column>
            <el-table-column v-else width="60">
              <template #default="scope">
                <!-- label值要与el-table数据id实现绑定 -->
                <el-radio v-model="checked" :label="scope.row.id" @change="handleRowSelect(scope.row)">{{
                  ''
                }}</el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="supplierCode" label="供应商编码"></el-table-column>
            <el-table-column prop="fullName" label="供应商名称"></el-table-column>
            <el-table-column prop="mainServeTypeName" label="供应商类型"></el-table-column>
          </x-table>
        </div>
        <div class="btn-area">
          <div>
            <el-button type="primary" icon="el-icon-right" circle @click="handleChoose"></el-button>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-back" circle @click="handleCancelChoose"></el-button>
          </div>
        </div>
        <div class="selected-area">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group v-model="checkList">
            <div :key="row.operatorId" v-for="row in selectedData">
              <el-checkbox :label="row.value">{{ row.label }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </x-dialog>
  </div>
</template>
<script>
import { TableListMixin, QueryDictMixin, PermissionsMixin } from '@package/utils'
import { listUrl, apiSupplierTypeTree } from './api'
import { EnumApiCode } from '../../../../../globalEnum'

export default {
  components: {},
  mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
  props: {
    supplierId: {
      type: String,
      default: ''
    },
    supplierState: {
      type: String,
      default: '3'
    },
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectName: '',
      visible: false,
      searchParams: {},
      otherParam: {
        // 默认状态 3、正式供应商   2、潜在供应商
        supplierState: this.supplierState
      },
      listUrl,
      treeData: [], // 供应商类型下拉树
      treeProps: {
        label: 'supplierTypeName',
        children: 'children'
      },
      tableData: [],
      checked: null,
      selectionRows: [], // 左边表格选中数据
      selectedData: [], // 右边区域数据
      checkList: [] // 右边区域 复选框选中数据
    }
  },
  computed: {
    isIndeterminate() {
      const checkedCount = this.checkList.length
      return checkedCount > 0 && checkedCount < this.selectedData.length
    },
    checkAll: {
      get() {
        const checkedCount = this.checkList.length
        return checkedCount > 0 && checkedCount === this.selectedData.length
      },
      set() {
        this.checkList = this.selectedData
      }
    }
  },
  watch: {
    supplierId(val) {
      this.checked = val
    },
    value(val) {
      this.selectName = val
    }
  },
  methods: {
    show() {
      this.visible = true
      this.loadData()
      this.loadTreeData()
    },
    // 获取物料分类下拉树的数据
    async loadTreeData() {
      const { data, code, msg } = await apiSupplierTypeTree()
      if (code === EnumApiCode.Success) {
        this.treeData = data
      } else {
        this.$message.error(msg)
      }
    },
    handleSearch(val) {
      this.queryParam = { ...this.searchParams, ...val }
      this.loadData()
    },
    handleReset() {
      this.$refs.form.resetFields()
      this.searchParams.mainServeType = ''
      this.resetSearch()
    },
    handleCheckAllChange(val) {
      if (!this.multiple) {
        this.$message.error('请勾选一条数据！')
        return
      }
      const selectedIds = this.selectedData ? this.selectedData.map((s) => s.value) : []
      this.checkList = val ? selectedIds : []
    },
    // 多行选中
    handleSelectionChange(rows) {
      this.selectionRows = rows
    },
    // 单选某行选中
    handleRowSelect(row) {
      this.selectionRows = [row]
    },
    // 穿梭选中
    handleChoose() {
      const selectedIds = this.selectedData ? this.selectedData.map((s) => s.value) : []
      this.selectionRows.forEach((row) => {
        if (!selectedIds.includes(row.id)) {
          const data = { ...row, label: row.fullName, value: row.supplierCode }
          this.selectedData.push(data)
        }
      })
    },
    handleCancelChoose() {
      this.selectedData = this.selectedData.filter((s) => {
        return !this.checkList.includes(s.value)
      })
      this.checkList = []
    },
    // 弹窗关闭
    handleClose() {
      this.checked = null
      this.selectedData = []
      this.visible = false
    },
    // 弹窗确定
    handleSubmit() {
      if (this.selectedData.length) {
        this.$emit('on-confirm', this.selectedData)
        this.handleClose()
      } else {
        this.$message.error('请至少选择一条数据点击确定')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.supplier-dialog {
  .dialog-fliter {
    // margin-bottom: 10px;
  }
  .x-table-container {
    height: 400px;
  }
  ::v-deep .el-form-container {
    background: none;
    box-shadow: none;
    border: none;
  }
  ::v-deep .el-form-content {
    padding: 0;
  }
  .search-btns {
    align-items: flex-end;
    display: flex;
    height: 70px;
  }
  .select-content {
    display: flex;
    .table-area {
      padding: 10px;
      flex: 1;
      border: 1px solid #ccc;
      ::v-deep .el-pagination__jump {
        margin-left: 0;
        padding-right: 6px;
      }
    }

    .btn-area {
      justify-content: center;
      display: flex;
      flex-direction: column;
      padding: 10px;
      div {
        margin-top: 10px;
      }
    }
    .selected-area {
      width: 200px;
      padding: 8px;
      border: 1px solid #ccc;
    }
  }
}
</style>
